<template>
  <div class="app-content-body fade-in-up ng-scope" v-loading="ifSub">
    <div class="fade-in ng-scope">
      <div class="wrapper-md ng-scope">
        <div class="panel panel-default">
          <div class="panel-heading">
            <strong>角色信息需改</strong>
          </div>
          <div class="panel-body">
            <role-form v-on:editSuccessState="editSuccessState" :edit-data="editData" :type="'edit'"></role-form>
          </div>
        </div>
      </div>
      <div style="display: none">{{fetchData}}</div>
    </div>
  </div>
</template>
<script>
  import RoleForm from './form.vue'
  import Vue from 'vue'
  import {SERVICE_URLS} from '../../../../config/service.url'


  export default{
    data(){
      return {
        ifSub: true,
        editData: {}
      }
    },
    props: ['editId', 'dialog'],
    computed: {
      fetchData(){
        if (this.editId) {
          const self = this;
          this.ifSub = true;
          Vue.submit(self, {
            url: SERVICE_URLS.role.view,
            params: {
              id: self.editId
            },
            noTips: true,
            callback(data){
              self.editData = data.body;
            }
          }, Vue);
        } else {
          this.editData = null;
        }
        return this.editId;
      }
    },
    components: {
      RoleForm
    },
    methods: {
      editSuccessState(){
//        if(this.dialog){
//          this.dialog.close();
//        }
        this.$emit('editSuccessState');
      }
    }
  }
</script>
